<template>
  <div class="my-list">
    <ul v-if="todos.length" class="todo-main">
    <MyItem v-for="todoObj in todos"  :key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo"
      :deleteTodo="deleteTodo" />
  </ul>
  <div class="todo-empty" v-else>没有待办事项</div>
  </div>
 
</template>

<script>
import MyItem from "./MyItem.vue";
export default {
  name: "MyList",
  components: {
    MyItem
  },
  props: ["todos", "checkTodo", "deleteTodo"],
};
</script>

<style scoped>
.todo-main {
  margin-left: 0;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding: 0;
  height:200px;
  overflow-y: auto;
  overflow-x: hidden;
}

.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}
</style>